import {Image, StyleSheet, Text, View} from 'react-native';
import React, {useEffect, useRef} from 'react';
import {imageUri} from '../constants/Uri'; // 网络图片
import avatar from '../assets/images/avatar.png'; // 本地图片

import icon_setting from '../assets/images/icon_setting.png';

const ImageDemo7_4 = () => {
  const imgRef = useRef(null);

  useEffect(() => {
    Image.getSize(
      imageUri,
      (width, height) => {
        console.log(`🚀网络图片 ~ width=${width}, height=${height}`);
      },
      error => {
        console.log(
          '🚀 ~ file: 7_4ImageDemo.jsx:18 ~ useEffect ~ error:',
          error,
        );
      },
    );

    Image.prefetch(imageUri)
      .then(data => {
        console.log('🚀 ~ file: 7_4ImageDemo.jsx:24 ~ useEffect ~ data:', data);
      })
      .catch(e => {
        console.log('🚀 ~ file: 7_4ImageDemo.jsx:27 ~ useEffect ~ e:', e);
      });
    return () => {};
  }, []);

  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_4ImageDemo
      </Text>
      <Image
        style={styles.img}
        // source={avatar} // TODO_LYS: 这里可能有问题 会有警告待修复
        source={{uri: imageUri}}
        blurRadius={3}
        fadeDuration={200}
        //debug的时候不生效，但是发布生产包的时候是没问题的
        defaultSource={avatar}
        onLoad={e => {
          // console.log('7_4 onLoad....');
          // console.log(Object.keys(e));
          // console.log('nativeEvent:   ', e.nativeEvent);
        }}
        onError={() => {
          console.log('7_4 onError....');
        }}
        onLoadStart={() => {
          // console.log('7_4 onLoadStart....');
        }}
        onLoadEnd={() => {
          // console.log('7_4 onLoadEnd....');
        }}></Image>

      <Image
        ref={imgRef}
        style={styles.imgDefault}
        source={icon_setting}></Image>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
    backgroundColor: '#ccc',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  img: {
    width: 200,
    height: 240,
    backgroundColor: 'pink',
    resizeMode: 'contain',
  },
  imgDefault: {
    width: 120,
    height: 120,
    tintColor: 'green',
  },
});
export default ImageDemo7_4;
